﻿<link rel="stylesheet" href="/css/welcome.css" />
<style>
    .welcome-module .layui-card-body {
        padding: 15px 10px;
        font-size: 15px;
    }

    .big {
        font-size: 16px;
        margin-left: 20px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-row" id="app">
                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div style="margin: 5px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="datetime" name="startTime" id="startTime" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">截止时间</label>
                                    <div class="layui-input-inline">
                                        <input type="datetime" name="endTime" id="endTime" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>

                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            </div>

            <div class="layui-row">
                <div class="layui-col-md4" style="padding-right:7.5px">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-tags icon"></i>AGV信息统计</div>
                        <div class="layui-card-body">
                            <div class="welcome-module" id="robotPie">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4" style="padding-right:7.5px">
                    <div class="layui-card">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-file-text icon"></i>AGV平均信息统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-card layui-bg-green" >
                                        <div class="layui-card-body">
                                            <span>平均使用时间:</span>
                                            <span id="averTime" class="big"></span>
                                        </div>
                                    </div>
                                    
                                    <div class="layui-card layui-bg-blue">
                                        <div class="layui-card-body">
                                            <span>平均充电时间:</span>
                                            <span id="averCharging" class="big"></span>
                                        </div>
                                    </div>
                                    <div class="layui-card layui-bg-orange">
                                        <div class="layui-card-body">
                                            <span>平均空闲时间(包含异常):</span>
                                            <span id="averIdle" class="big"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4" style="padding-right:7.5px">
                    <div class="layui-card">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-file-text icon"></i>任务总览</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">统计</span>
                                                        <h5 layui-bg-blue>总任数目</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h2 class="no-margins" id="taskCount" style="color:blue">88</h2>
                                                        <small>所选时间段内</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">打断</span>
                                                        <h5>打断任务</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h2 class="no-margins" id="abortCount" style="color:green">88</h2>
                                                        <small>包含在任务总数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">最忙</span>
                                                        <h5>使用最多的AGV</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h2 class="no-margins" id="busyRobot" style="color:orange">88</h2>
                                                        <small id="busyTime">时长:</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-red">最闲</span>
                                                        <h5>使用最少的AGV</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h2 class="no-margins" id="idleRobot" style="color:red">99</h2>
                                                        <small id="idleTime">时长:</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--<div class="layui-row">
                <div id="main" style="width: 100%;height: 500px;"></div>
            </div>-->

        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    
</script>
<script>
    layui.use(['form', 'table','laydate', 'echarts','miniPage','element'], function () {
        var $ = layui.jquery,
            echarts = layui.echarts,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage;
        laydate = layui.laydate;

        laydate.render(
            {
                elem: "#startTime",
                type: "datetime",
            });
        laydate.render(
            {
                elem: "#endTime",
                type: "datetime",
            });
        //渲染表格
        table.render({
            elem: '#currentTableId',
            url: 'api/Statistics/GetUtilizationInfo/',
            parseData: function (res) { //res 即为原始返回的数据
                return {

                    "code": res.code === 200 ? 0 : res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                }
            },
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                { field: 'beginTime', width: 150, title: '日期', sort: true, align: "center", templet: "<div>{{layui.util.toDateString(d.beginTime, 'yyyy-MM-dd')}}</div>"  },
                { field: 'robotId', width: 150, title: '机器人编号', sort: true, align: "center" },
                { field: 'chargeTime', title: '充电时间(min)', sort: true, width: 160, align: "center" },
                { field: 'taskTime', title: '做任务时间(min)', sort: true, minWidth: 180, align: "center" },
                {
                    field: 'utilizationRate', width: 150, title: '使用率(%)', align: "center", templet: function (data) {
                        var rate = parseFloat(data.utilizationRate*100).toFixed(2); //设置小数点后个数
                        return rate;
                    } },
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            id: 'reloadTable',
            page: true,
            even: "true",
            skin: 'row',
        });

        //表格重新加载
        var tablereload = function (search) {
            table.reload('reloadTable',
                {
                    where: {
                        query: search
                    }, page: {
                        curr: 1
                    }
                });
        }
        //TaskInfo
        //机器人图表
        var RobotPie = {
            title: {
                text: '机器人状态统计',
                x: 'center' //标题居中
            },

            legend: {
                orient: 'vertical', //类型垂直,默认水平
                left: 'left', //类型区分在左 默认居中
                data: ['任务',  '空闲', '充电']
            },
            series: [{
                type: 'pie', //饼状
                radius: '65%', //圆的大小
                center: ['50%', '50%'], //居中
                data: [{
                    value: 4,
                    name: '任务',
                },
                {
                    value: 2,
                    name: '空闲',

                },
                {
                    value: 1,
                    name: '充电',

                },
                ]
            }]
        };
        var RobotChart = echarts.init(document.getElementById('robotPie'));
        RobotChart.setOption(RobotPie, true);



        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {

            var result = JSON.stringify(data.field);
            console.log(result);
            var query = {};
            for (var key in data.field) {
                if (data.field[key].length > 0) {
                    query[key] = data.field[key];
                }
            }
            //显示表格信息
            table.reload('reloadTable', {
                where: {
                    query: JSON.stringify(query)
                }
                ,page: {
                    curr: 1
                }
            });

            //平均时间
            $.ajax({
                type: 'get',
                url: 'api/Statistics/GetAvarage/?query=' + JSON.stringify(query),
                dataType: 'json',
                success: function (res) {
                    console.log(res.data);
                    $("#averTime").html(res.data.avarge.averageTask + " min");
                    $("#averCharging").html(res.data.avarge.averageCharge + " min");
                    $("#averDock").html(res.data.avarge.averageDock + " min");
                    $("#averIdle").html(res.data.avarge.averageIdle + " min");
                    RobotChart.setOption({
                        series: [{
                            type: 'pie', //饼状
                            radius: '65%', //圆的大小
                            center: ['50%', '50%'], //居中
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{b}: {c}'
                                }
                            },
                            data: [
                                {
                                    value: res.data.avarge.averageIdle,
                                    name: '空闲',
                                    itemStyle: {
                                        color: '#1d953f'

                                    }
                                },

                                {
                                    value: res.data.avarge.averageTask,
                                    name: '任务',
                                    itemStyle: { color: '#d71345' }
                                },

                                {
                                    value: res.data.avarge.averageDock,
                                    name: '充电',
                                    itemStyle: {
                                        color: '#fcaf17'

                                    }
                                }


                            ]
                        }]
                    });


                    $("#taskCount").html(res.data.sum.count);
                    $("#abortCount").html(res.data.sum.abort);
                    $("#busyRobot").html(res.data.sum.busy.robotId);
                    console.log(res.data.busy);
                    $("#busyTime").html("时长:" + res.data.sum.busy.sumTask);
                    $("#idleRobot").html(res.data.sum.idle.robotId);
                    $("#idleTime").html("时长:" + res.data.sum.idle.sumTask);
                }
            });

            //统计信息
            $.ajax({
                type: 'get',
                url: 'api/Statistics/GetTrend/?query=' + JSON.stringify(query),
                dataType: 'json',
                success: function (res) {

                }
            });


            return false;
        });










    });
</script>